<template>
    <div>
        <van-nav-bar
                title="用户注册"
                left-arrow
                left-text="去登陆"
                @click-left="skipLogin"
        />
        <van-form ref="registForm">
            <van-field
                    v-model="userInfo.username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="registerCheck.usernameCheck"
            />
            <van-field
                    v-model="userInfo.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="registerCheck.passwordCheck"
            />
            <van-field
                    v-model="userInfo.mobile"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    :rules="registerCheck.phoneNumberCheck"
            />
            <div style="margin: 16px;">
                <van-button round block @click="userRegist" type="info">注册</van-button>
            </div>
        </van-form>
    </div>

</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                userInfo:{
                    username:"",
                    password:"",
                    mobile:""
                },
                registerCheck:{
                    usernameCheck:[
                      {validator:this.checkUsernameIsRepeated,message: "用户名重复,请换一个"},
                      {pattern:/\w{5,12}/,message:"账号以字母开头,长度5-12位"},
                      {validator:this.checkUsernameAndPasswordLength,message: "长度5-12位"}
                    ],
                    passwordCheck:[
                      {pattern:/\w{5,12}/,message:"数字、字母、下划线,长度5-12位"},
                      {validator:this.checkUsernameAndPasswordLength,message: "长度5-12位"}
                    ],
                    phoneNumberCheck:[
                      {pattern:/(13\d|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18\d|19[0-35-9])\d{8}/,message:"手机号格式错误"},
                      {validator:this.checkPhoneNumberLength,message: "长度11位"}
                    ]
                }
            }
        },
        methods:{
          userRegist(){
               this.$refs.registForm.validate().then(async resp=>{
                   const{data:res}=await this.$http.post("/user/regist",this.userInfo);
                   if (res.status===201){
                       this.$notify({type:"success",message:"注册成功"});
                       await this.$router.push("/login")
                   }else {
                       this.$notify({type:"danger",message:"注册失败"})
                   }
               }).catch(error=>{

               })
            },
            //跳转登录
            skipLogin(){
                this.$router.push("/login")
            },
            //校验用户名是否重复
           async checkUsernameIsRepeated(val){
              const{data:res}=await this.$http.get("/user/checkUsername",
                    {params:{username:val}});
              if (res.status===200){
                return true;
              }
                return false;
            },
            //检验账号和密码长度
            checkUsernameAndPasswordLength(val){

                  if (val.length<=12&& val.length>=5){
                    return true
                  }
                  return false
            },
            //检验手机号长度
            checkPhoneNumberLength(val){
              if (val.length===11){
                return true
              }
              return false
            }
        }
    }
</script>

<style scoped>

</style>
